<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单添加</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
	body{
		padding: 15px 20px;
	}
	#sample-table img{
		width: 100px;
		height: 60px;
	}
	.pay_info li{
		text-align: right;
		font-size: 20px;
		font-family: KaiTi;
	}
	.search{
		margin-bottom: 25px;
	}
	.btn_search{
		height: 32px;
	    background: #2a8bcc!important;
	    background-image: linear-gradient(to bottom,#3b98d6 0,#197ec1 100%)!important;
	    background-repeat: repeat-x!important;
	    line-height: 32px;
	    border: 0px;
	    width: 60px;
	    text-align: center;
	    color: #FFF;
	    margin-left: 50px;
	}
	.shopping_trolley h1{
		color: red;
		font-weight: 900;
		font-family: KaiTi;
		margin-bottom: 20px;
	}
	.dishesList{
		margin: 0 auto;
		margin-bottom: 50px;
		height: 380px;
		overflow-x: hidden;
 		overflow-y: scroll;
	}
	.dishesList li{
		float: left;
		border: 2px solid #9f9f9f;
		padding: 3px;
		font-size: 16px;
		text-align: center;
		cursor: pointer;
		margin: 3px;
	}
	.dishesList li img{
		width: 150;
		height: 120px;
	}
	.dishesList li div{
		margin: 5px 0;
	}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">

	//声明一个原价
	var oldprice = 0;
	//声明一个现价
	var nowprice = 0;

	function addDishes(did){
		$.get("findDishesByDid.do?did="+did, function(dishes){
			let str = "";
			str += '<tr>';
			str += '<td><input type="checkbox" class="sab"></td>';
			str += '<td><span>'+dishes.dname+'</span></td>';
			str += '<td><span>'+dishes.dtype+'</span></td>';
			str += '<td><img src="'+dishes.dimage+'"></td>';
			str += '<td><span>'+dishes.doldprice+'</span></td>';
			str += '<td><span>'+dishes.dnowprice+'</span></td>';
			str += '<td><span>'+dishes.remark+'</span></td>';
			str += '<td>';
			str += '<a title="移除"  href="javascript:;" class="btn btn-xs btn-warning">';
			str += '<i class="icon-trash  bigger-120"></i>';
			str += '</a>';
			str += '</td>';
			str += '</tr>';
			$("#shopping").append(str);
			
			oldprice += parseFloat(dishes.doldprice);
			nowprice += parseFloat(dishes.dnowprice);
			$("#oldprice").html('￥ <del>'+oldprice+'</del>');
			$('#nowprice').html('￥ '+nowprice);
			
			//下面是关于提交表单的数据操作
			$('#ooldprice').val(oldprice);
			$('#onowprice').val(nowprice);
			
			str = '';
			str += '<input type="checkbox" checked="checked" name="did" value="'+dishes.did+'">';
			str += '<input type="checkbox" checked="checked" name="remark" value="'+dishes.remark+'"> ';
			$("#form").append(str);
			str = '';
		});
	}
	
	function submitOrder(){
		$('#form').submit();
	}

	$(document).ready(function(){
		
		$.get("selectAllDishes.do",function(result){
			$("#dishesList").empty();
			let str = "";
			for(let i = 0 ; i < result.length; i++){
				let dishes = result[i];
				str += '<li onclick="addDishes('+dishes.did+');">';
				str += '<img src="'+dishes.dimage+'">';
				str += '<div>'+dishes.dname+'</div>';
				str += '<div>';
				str += '<span>￥ <del>'+dishes.doldprice+'</del></span>';
				str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
				str += '<span>￥ <del>'+dishes.dnowprice+'</del></span>';
				str += '</div>';
				str += '</li>';
			}
			$("#dishesList").append(str);
			
			$("#shopping").empty();	//清空购物车
		});
		
	});
</script>
</head>
<body>
	<div class="search">
		<span>菜品: </span>
		<input type="text" placeholder="请输入要检索的菜品">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<label class="label_name">请选择菜品分类：</label>
		  <select class="tid" id="tid" name="tid">
		    <option value="">选择分类</option>
		    <option value="1">凉菜</option>
		    <option value="2">炒菜</option>
		    <option value="3">烧菜</option>
		    <option value="4">炖菜</option>
		    <option value="5">清蒸</option>
		    <option value="6">小吃</option>
		    <option value="7">甜品</option>
		    <option value="8">饮品</option>
		  </select>
		
		<button class="btn_search">
			<i class="icon-search"></i>
			搜索
		</button>
	</div>
	<!-- 菜品列表展示  -->
	<div class="dishesList">
		<ul id="dishesList">
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
			<li>
				<img src="images/dishes/tudou.jpg">
				<div>天蚕土豆</div>
				<div>
					<span>￥ <del>19.9</del></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>￥ <b>9.9</b></span>
				</div>
			</li>
		</ul>
	</div>
	<!-- 购物车 -->
	<div class="shopping_trolley">
		<h1>购物车</h1>
		<table class="table table-striped table-bordered table-hover dataTable no-footer" 
				id="sample-table" role="grid" aria-describedby="sample-table_info">
				<thead>
					<tr role="row">
						<th><input type="checkbox" class="sab" name="select" value="0"></th>
						<th><span>菜品名</span></th>
						<th><span>菜品分类</span></th>
						<th><span>图片</span></th>
						<th><span>原价</span></th>
						<th><span>现价</span></th>
						<th><span>备注</span></th>
						<th><span>操作</span></th>
					</tr>
				</thead>
				<tbody id="shopping">
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>天蚕土豆</span></td>
						<td><span>小吃</span></td>
						<td><img src="images/dishes/tudou.jpg"></td>
						<td><span>19.9</span></td>
						<td><span>9.9</span></td>
						<td><span>推荐：麻辣口味</span></td>
						<td>
							<a title="移除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>天蚕土豆</span></td>
						<td><span>小吃</span></td>
						<td><img src="images/dishes/tudou.jpg"></td>
						<td><span>19.9</span></td>
						<td><span>9.9</span></td>
						<td><span>推荐：麻辣口味</span></td>
						<td>
							<a title="移除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>天蚕土豆</span></td>
						<td><span>小吃</span></td>
						<td><img src="images/dishes/tudou.jpg"></td>
						<td><span>19.9</span></td>
						<td><span>9.9</span></td>
						<td><span>推荐：麻辣口味</span></td>
						<td>
							<a title="移除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
				</tbody>
		</table>
		<div class="pay_info">
			<ul>
				<li>
					  <label class="label_name">总价：</label>
					  <span class="cont_style" id="oldprice">￥ <del>0.00</del></span>
				</li>
				<li>
					<label class="label_name">折扣后：</label>
					  <span class="cont_style" id="nowprice">￥ 0.00</span>
				</li>
				<li>
					<label class="label_name"></label>
					<button type="button" class="btn" onclick="submitOrder();">支付</button>
				</li>
			</ul>
		</div>
	</div>
	<form action="addOrder.do" style="display: none" method="get" id="form">
		<input type="text" name="ooldprice" id="ooldprice" value=""/>
		<input type="text" name="onowprice" id="onowprice" value=""/>
	</form>
</body>
</html>